<template>
  <div
    class="w-240px h-292px rounded-4px flex flex-col items-center relative"
    :style="{ background: props.background }"
  >
    <div
      class="w-212px h-156px absolute top-20px left-20px border-box"
      :style="{ border: `1px solid ${props.lineColor}` }"
    >
      <div
        class="w-124px h-6px absolute left-0 bottom-0"
        :style="{ background: props.lineColor }"
      ></div>
      <div
        class="w-6px h-124px absolute right-0 top-0"
        :style="{ background: props.lineColor }"
      ></div>
    </div>
    <slot v-if="$slots.default"></slot>
    <div v-else class="w-212px h-156px mt-14px z-1">
      <img class="w-full h-full" :src="props.img" alt="" />
    </div>
    <div class="font-bold text-white text-20px leading-29px mt-14px">{{ props.title }}</div>
    <div v-if="props.description" class="text-13px text-white leading-19px pt-4px">
      {{ props.description }}
    </div>
    <div
      class="w-102px h-28px bg-white rounded-100px font-medium text-15px mt-12px text-center leading-28px cursor-pointer"
      :style="{ color: '#222026' }"
      @click="enter"
    >
      {{ props.enter }}
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  background: {
    type: String,
    required: true
  },
  lineColor: {
    type: String,
    required: true
  },
  img: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: false
  },
  enter: {
    type: String,
    required: true
  }
})

const emits = defineEmits(['on-enter'])

const enter = () => {
  emits('on-enter')
}
</script>

<style scoped></style>
